<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程分类</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info" v-if="majordata.length!=0">
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item :title="item.name" :name="i" v-for="(item, i) in majordata" :key="i">
                <div class="sub" v-for="(sub, index) in item.submajors" :key="index"
                    :class="{ btbor: index === item.submajors.length - 1 }">
                    {{ sub.name }}
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
    <div v-else>
         <el-empty :image-size="200" />
    </div>

</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { majorlist } from '@/apis/major'
const majordata = ref<any>([])
const activeName = ref<string>('1')
const getmajorlist =async()=>{
    const res = await majorlist()
    majordata.value = res.data.data
}
onMounted(()=>{
getmajorlist()
})
</script>
<style lang='scss' scoped>
.info {
    margin-top: 15px;

    .sub {
        font-size: 16px;
        padding: 8px 0;
        border-top: 1px solid black;
    }

}

.btbor {
    border-bottom: 1px solid black;
}

:deep(.el-collapse-item__title) {
    font-weight: bold;
    font-size: 18px;
}
</style>